<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>棒主妇首页</title>
    <link rel="stylesheet" href="../jquery-mobile/theme/bzf-default.min.css"/>
    <link rel="stylesheet" href="../jquery-mobile/theme/bzf-default-asset.css"/>
    <link rel="stylesheet" href="../jquery-mobile/css/jquery.mobile.structure-1.3.1.min.css">
    <link rel="stylesheet" href="../css/mobile.css"/>
    <script>
        var WEB_ROOT_HOST = 'http://192.168.2.189/';
        var WEB_ROOT_BASE = '/PHPStorm/bzfshop/src/mobile/Public';
        var WEB_ROOT_BASE_RES = '/PHPStorm/bzfshop/src/mobile/Theme/Mobile/';
        var FLASH_MESSAGE_STR = '';
        var USER_NAME_DISPLAY = '';
    </script>
    <script src="../jquery-mobile/js/jquery-1.9.1.min.js"></script>
    <script src="../jquery-mobile/js/jquery.lazyload.js"></script>
    <script src="../js/mobile.js"></script>
    <script src="../jquery-mobile/js/jquery.mobile-1.3.1.min.js"></script>
    <script src="../jquery-mobile/plugin/route/jquery.mobile.router.min.js"></script>
</head>
<body>

<!-- 主 Page -->
<div data-role="page" class="ui-responsive-panel" data-title="商品详情">

    <!-- Page Header -->
    <div data-role="header" data-theme="f">

        <div data-role="controlgroup" class="ui-btn-left" data-type="horizontal" data-mini="true">
            <a href="#goods_category_panel" data-role="button" data-icon="grid">商品分类</a>
        </div>

        <span class="ui-title"/>

        <div data-role="controlgroup" class="ui-btn-right" data-type="horizontal" data-mini="true">
            <a href="#user_register_popup" data-rel="popup" data-position-to="window" data-transition="flip"
               data-role="button" data-icon="plus">注册</a>
            <a href="#user_login_popup" data-rel="popup" data-position-to="window" data-transition="flip"
               data-role="button" data-icon="check">登陆</a>
        </div>

    </div>
    <!-- /Page Header -->

    <!-- Page 主体内容 -->
    <div data-role="content">

        <!-- 商品标题 -->
        <h4>这里是商品的标题</h4>
        <!-- /商品标题 -->

        <!-- 商品头图和价格 -->
        <div class="ui-grid-a">

            <!-- 头图 -->
            <div class="ui-block-a">

                <a id="goods_view_head_image_thumbnail"
                   data-rel="popup" href="#goods_view_head_image_popup" data-transition="pop">
                    <img src="../img/lazyload_placeholder_298_223.png"/>
                </a>

                <div data-role="popup" id="goods_view_head_image_popup" class="photopopup"
                     data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
                    <a href="#" data-rel="back" data-role="button" data-theme="a"
                       data-icon="delete" data-iconpos="notext" class="ui-btn-right">关闭</a>
                    <img src="../img/lazyload_placeholder_460_344.png" alt="商品头图">
                </div>

            </div>
            <!-- 头图 -->

            <!-- 商品价格信息 -->
            <div class="ui-block-b" style="padding: 10px 10px;">
                <div class="ui-grid-a">
                    <div class="ui-block-a" style="font-weight: bold;">原价</div>
                    <div class="ui-block-b" style="text-decoration: line-through;color:blue;">
                        ￥200
                    </div>
                    <div class="ui-block-a" style="font-weight: bold;">现价</div>
                    <div class="ui-block-b" style="color:red;font-weight: bold;">￥100</div>
                </div>
            </div>
            <!-- 商品价格信息 -->

            <div class="ui-block-a">
                <a data-role="button" href="tel:01083487737" data-theme="f">客服电话</a>
            </div>
            <div class="ui-block-b">
                <a data-role="button" data-theme="e" href="#">点击购买</a>
            </div>

        </div>
        <!-- 商品头图和价格 -->

        <!-- 商品的各种介绍 -->
        <div data-role="collapsible-set" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"
             data-theme="c" data-content-theme="d">

            <div data-role="collapsible">
                <h3>商品简介</h3>

                <p>这里是商品的简单介绍</p>
            </div>
            <div data-role="collapsible">
                <h3>商品提示</h3>

                <p>这里是商品提示</p>
            </div>
            <div data-role="collapsible">
                <h3>商品详情</h3>
                这里是商品商品详情
            </div>
            <div data-role="collapsible">
                <h3>用户评论</h3>

                <p>这里是商品用户评论</p>
            </div>
            <div data-role="collapsible">
                <h3>商家信息</h3>

                <p>这里是商家信息</p>
                <a data-role="button" href="tel:01083487737" data-theme="f">商家电话</a>

            </div>
        </div>
        <!-- /商品的各种介绍 -->

        <a data-role="button" data-theme="e" href="#">点击购买</a>

    </div>
    <!-- /Page 主体内容 -->


</div>
<!-- /主 Page -->

</body>
</html>
